<html>
<head>

<link rel="stylesheet" type="text/css" href="../common/css/htmlAssessment.css" />
<link rel="stylesheet" type="text/css" href="openresponse.css" />
<link rel="stylesheet" type="text/css" href="../common/css/niftyCorners.css" />

<script type="text/javascript" src="../common/js/loadxmldoc.js"></script>
<!-- YUI Seed -->
<script src="http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js" type="text/javascript"></script>

<script type="text/javascript" src="../common/js/helperfunctions.js"></script>
<script type="text/javascript" src="openresponsestate.js" ></script>                
<script type="text/javascript" src="openresponse.js" ></script>                



<script type="text/javascript">
var or;   // global variable so it can be accessed by other functions
var states = [];  // array of OPENRESPONSESTATE objects

function save() {
  or.save();
}

function edit() {
	  or.edit();
}

/**
 * xmlString contains QTI-coded xml content
 */
function loadContentXMLString(xmlString) {
	alert('openresponse');
	  var xmlDoc=loadXMLDocFromString(xmlString);	
	  or = new OPENRESPONSE(xmlDoc);
	  or.render();	
}

/**
 * sets VLE, loads state
 */
function loadFromVLE(node, vle) {
	or.loadFromVLE(node, vle);
}

function checkAnswer() {
	or.checkAnswer();
}
</script>

<!--  Javascript Pop up window -->
<script type="text/javascript">

var newWin = null;
function popUp(strURL, strType, strHeight, strWidth) {
 if (newWin != null && !newWin.closed)
   newWin.close();
 var strOptions="";
 if (strType=="console")
   strOptions="resizable,height="+
     strHeight+",width="+strWidth;
 if (strType=="fixed")
   strOptions="status,height="+
     strHeight+",width="+strWidth;
 if (strType=="elastic")
   strOptions="toolbar,menubar,scrollbars,"+
     "resizable,location,height="+
     strHeight+",width="+strWidth;
 newWin = window.open(strURL, 'newWin', strOptions);
 newWin.focus();
}

</script>

<!--  Nifty Cube for Rounded Corners -->

<script type="text/javascript" src="../common/js/niftycube.js"></script>
<script type="text/javascript">
 window.onload=function(){
Nifty("div#locationBar2","bottom,small");
Nifty("div#questionCountBox","big, top");
Nifty("div#leftColumn,div#rightColumn","same-height none bll tr big");
}
</script>
</head>

<body>

<div id="questionCountBox" class="BG3">
	<div class="instructionsReminder">For instructions click &nbsp;<a href="OpenResponseInfoBox.html" onclick="popUp(this.href,'console',700,720);return false;" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
	<table id="questionTable">
		<tr>
		<td id="questionNumber">Question X of Y:</td>
	    <td id="questionType">Open Response</td>
		<td id="questionHelp"><a href="OpenResponseInfoBox.html" onclick="popUp(this.href,'console',700,720);return false;" target="_blank">&nbsp&nbsp&nbsp</a></td>
		</tr>
		</tr>
	</table>
</div>   <!-- end of questionNumberBox -->

<div id="currentQuestionBox">
	
	<div id="leftColumn">
		<div class="itemLabel Color1">question</div>
		<div id="promptDiv">Prompt goes here. This text will automatically be replaced by actual prompt.</div>
		<div class="itemLabel Color1">response</div>
		<div id="responseBoxDiv">
			<textarea id="responseBox"></textarea>
		</div>
	</div>
	
	<div id="rightColumn" class="BG1">
		<a href=""><img src="../../../images/robots/open_response.png" alt="Robot Art Open Response" width="100" height="250" border="0" /></a>
	</div>
</div>

<div id="clearBoth"></div>

<!-- Anchor-Based Button Layout using TABLE -->

	<div id="buttonDiv">
		<div id="statusDiv">
			<div id="numberAttemptsDiv"></div>
		</div>
		<table id="buttonTable">
		   <tr>
		   	<td><a href="#" id="saveButton" onClick="javascript:save();" >Save</a></td>
		   	<td><a href="#" id="editButton" onClick="javascript:edit();" class="disabledLink" >Edit</a></td>
		   	<td><a href="#" id="nextQuestionButton" onClick="" class="disabledLink" >Previous Q</a></td>
		   	<td><a href="#" id="nextQuestionButton" onClick="" class="disabledLink" >Next Q</a></td>
	   	   </tr>
	   	 </table>
	</div>




</body>
</html>
